import QtQml 2.0
import QtQuick 2.9
import QtQuick.Controls 2.2
import TaoQuick 1.0

Item {
    id: leftPaneItem
    signal loadContent(string path)
    signal loadHome



    Item {
        width: parent.width
        height: 40
        CusTextField_Search {
            id: searchInput
            objectName: "searchInput"
            anchors {
                left: parent.left
                leftMargin: 4
                verticalCenter: parent.verticalCenter
                right: parent.right
                rightMargin: 4
            }
            placeholderText: qsTr("Search")
            onTextChanged: {
                demoModel.search(text)
            }
        }
    }
    Rectangle {
        id: hLine
        width: parent.width
        height: 1
        y: 40
        color: CusConfig.controlBorderColor
    }

    ContentModel {
        id: demoModel
    }

    Rectangle {
        id: home
        width: parent.width
        height: CusConfig.fixedHeight
        color: listView.currentIndex === -1
               ? CusConfig.controlBorderColor_pressed
               : "transparent"
        opacity: 0.8
        anchors {
            top: hLine.bottom
            topMargin: 4
        }
        CusTextButton {
            text: qsTr("about")
            objectName: "homeBtn"
            backgroundColor: "transparent"
            borderColor: "transparent"
            width: parent.width
            onClicked: {
                listView.currentIndex = -1
                loadHome()
            }
        }
    }


    ListView{
        id: listView
        objectName: "Setting"
        model: demoModel
        width: parent.width
        anchors {
            top: home.bottom
            topMargin: 4
            bottom: parent.bottom
        }
        currentIndex: -1
        clip: true

        ScrollBar.horizontal: CusScrollBar {
            id: hbar
            opacity: listView.contentWidth > listView.width ? 1.0 : 0.0
            visible: opacity > 0
            active: visible
        }
        ScrollBar.vertical: CusScrollBar {
            id: vBar
            opacity: listView.contentHeight > listView.height ? 1.0 : 0.0
            visible: opacity > 0
            active: visible
        }

        section.property: "group"
        section.delegate: Item {
            width: listView.width
            height: CusConfig.fixedHeight
            Row{
                anchors.fill: parent
                Rectangle{
                    width: 40
                    height: 40
                color: sectionBtn.pressed
                       ? CusConfig.controlBorderColor_pressed
                       : (sectionBtn.hovered
                          ? CusConfig.controlBorderColor_hovered
                          : CusConfig.controlColor)
                    Image {
                        anchors.fill: parent
                        id: name
                        fillMode: Image.PreserveAspectFit
                        source: imgPATH+demoModel.getIconPath(section)

                    }
                }

                ExpandBtn {
                    id: sectionBtn
                    text: qsTr(section)
                    height: 40
                    width: parent.width
                    onClicked: {
                        isOpened = !isOpened
                        demoModel.updateSection(section, isOpened)
                    }
                }
            }

        }

        delegate: Rectangle {
            width: listView.width
            height: visible ? CusConfig.fixedHeight : 0
            visible: model.visible && model.groupOpen
            color: ListView.isCurrentItem ?"#FFE000" :  CusConfig.controlBorderColor_pressed
            opacity: 0.8
            radius: 5
            Row{
                anchors.fill: parent
                anchors.leftMargin: 40
                Image {
                    width: 30
                    height: 30
                    id: subimg
                    fillMode: Image.PreserveAspectFit
                    source: imgPATH+IconPath
                }
                CusTextButton {
                    id: btn
                    anchors {
                        leftMargin: 20
                    }
                    width: parent.width
                    text: qsTr(model.name)
                    backgroundColor: "transparent"
                    borderColor: "transparent"
                    onClicked: {
                        listView.currentIndex = index
                        loadContent(model.source)
                    }
                    contentItem: Item {
                        width: btn.width
                        height: btn.height
                        BasicText {
                            verticalAlignment: Text.AlignVCenter
                            horizontalAlignment: Text.AlignLeft
                            text: btn.text
                            color: btn.textColor
                        }
                    }
                }
            }
        }

    }
}
